<!doctype HTML>
<html>
    <head>
        <title>kts46 Web UI</title>
        <style type="text/css">
            @import url("css/ui-lightness/jquery-ui-1.8.7.custom.css?v=1");
            @import url("css/style.css?v=1");
        </style>
        <script type="text/javascript" src="js/json2.js?v=1"></script>
        <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.7.custom.min.js"></script>
        <script type='text/javascript' src='https://www.google.com/jsapi'></script>
        <script type="text/javascript" src="js/script.js?v=4"></script>
    </head>
    <body>
        <ul id="projects-list" class="layout-column-1"></ul>
        <div class="ui-widget-content toolbar layout-column-2" id="header">
            <div>
                Project:
                <button id="simulation-add-project">Add project</button>
                <button id="simulation-delete-project">Delete project</button>
            </div>
            <div>
                Job:
                <button id="simulation-start-job">Start job</button>
                <button id="simulation-add-job">Add job</button>
                <button id="simulation-delete-job">Delete job</button>
                <button id="show-statistics">Statistics</button>
                <button id="show-live-view">Live</button>
            </div>
            <button id="export-in-csv">CSV</button>
            <div id="last-update-time">
                Updated: <span class="content"></span>
            </div>
        </div>

        <div class="layout-column-2 content">
                <div class="progress-block">
                   <div class="last-update-time"></div>
                </div>
            <div id="progress-table-2" class="layout-row layout-row-1"></div>
            <div id="details-view" class="layout-row layout-row-2">
                <pre id="details-content">
                </pre>
            </div>
        </div>


        <div id="add-project-confirm" title="Add project?" style="display: none;">
            <p>
                <span class="ui-icon ui-icon-alert"></span>
                <label for="add-project-name">Project name</label>
                <input id="add-project-name" type="text" value="new_project_1"
                    class="ui-widget-content ui-corner-all"/>
                Are you sure you want to add a project to server?
            </p>
        </div>

        <div id="delete-project-confirm" title="Delete project?" style="display: none;">
            <p>
                <span class="ui-icon ui-icon-alert"></span>

                <label for="delete-project-name">Project name</label>
                <select name="delete-project-name" id="delete-project-name"
                    class="ui-widget-content ui-corner-all"></select>
                <br />

                These project will be permanently deleted and cannot be recovered. Are you sure?
            </p>
        </div>

        <div id="delete-job-confirm" title="Delete job?" style="display: none;">
            <p>
                <span class="ui-icon ui-icon-alert"></span>
                These job will be permanently deleted and cannot be recovered. Are you sure?
            </p>
        </div>

        <div id="add-job-form" title="Add job user" style="display: none;">
            <p class="validateTips"><!-- All form fields are required. --></p>
            <form>
            <fieldset>
                <label for="add-job-project-name">Project name</label>
                <select name="add-job-project-name" id="add-job-project-name"
                    class="ui-widget-content ui-corner-all"></select>
                <br />

                <label for="add-job-name">Name</label>
                <input type="text" name="add-job-name" id="add-job-name" class="text ui-widget-content ui-corner-all" />
                <br />

                <label for="add-job-definition">Definition file</label>
                <input type="file" name="add-job-definition" id="add-job-definition" class="ui-widget-content ui-corner-all" />
                <br />

                <label for="add-job-is-series">Add as a series?</label>
                <input type="checkbox" name="add-job-is-series" id="add-job-is-series" class="ui-widget-content ui-corner-all"/>
                <br />

                <label for="add-job-count">Job series length</label>
                <input type="text" name="add-job-count" id="add-job-count"
                    class="text ui-widget-content ui-corner-all" value="1" />
                <br />
            </fieldset>
            </form>
        </div>

        <div id="live-view" title="Live view">
            <div class="time">0.0</div>
            <canvas width="750" height="300">Your browser doesn't support HTML 5 canvas tag.</canvas>
        </div>


    </body>
</html>
